<template>
    <div class="view">
        <nav-bar title="实名认证" :fixed="false" :rightText="canUpload?'提交':''" @clickRight="submit" color="#ec6786">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>

        <div class="auth-wrap">
            <div class="auth-result" v-if="!canUpload">
                <div class="auth-result-text">您的实名认证申请已经提交</div>
                <div class="auth-result-text">我们将在1～5个工作日内审核</div>
            </div>
            <cube-scroll v-else>
                <div class="auth-area">
                    <cube-upload
                            ref="upload"
                            v-model="frontFiles"
                            :action="uploadOption"
                            @files-added="addedFrontHandler"
                            @file-error="errHandler">
                        <div class="clear-fix">
                            <cube-upload-file v-for="(file, i) in frontFiles" :file="file" :key="i"></cube-upload-file>
                            <cube-upload-btn :multiple="false">
                                <div>
                                    <i>＋</i>
                                    <p>请上传身份证正面照片</p>
                                </div>
                            </cube-upload-btn>
                        </div>
                    </cube-upload>
                </div>
                <div class="auth-area">
                    <cube-upload
                            ref="upload"
                            v-model="backFiles"
                            :action="uploadOption"
                            @files-added="addedBackHandler"
                            @file-error="errHandler">
                        <div class="clear-fix">
                            <cube-upload-file v-for="(file, i) in backFiles" :file="file" :key="i"></cube-upload-file>
                            <cube-upload-btn :multiple="false">
                                <div>
                                    <i>＋</i>
                                    <p>请上传身份证背面照片</p>
                                </div>
                            </cube-upload-btn>
                        </div>
                    </cube-upload>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import NavBar from "@/components/aui/NavBar.vue";
    import HeadImg from "@/components/HeadImg.vue";
    import {updateUser} from "@/store/dispatches";
    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar, HeadImg
        }
    })
    export default class MineRealNameAuthentication extends Scene {

        private action: string = "//jsonplaceholder.typicode.com/photos/";
        private frontFiles: [] = [];
        private backFiles: [] = [];
        private canUpload: boolean = true;

        @State("UserStore")
        public user!: InterfaceUser;

        private back() {
            this.navigateBack();
        }

        private created() {
            this.getAuthStatus();
        }

        private async getAuthStatus(): Promise<any> {
            const toast = (<any> this).$createToast({
                time: 0,
                txt: "请求实名状态...",
                mask: true
            }).show();
            try {
                const res = await Http.get(this.api.getAuthenticationStatus, {}, {token: this.user.token});
                toast.hide();
                if (res.code === 1) {
                    this.canUpload = !!res.data.status;
                } else {
                    this.globalSingleResultToast(res);
                }
            } catch (e) {
                toast.hide();
            }

        }

        private get uploadOption(): any {
            let uploadOption: any = {};
            uploadOption.target = this.api.imageUpload;
            uploadOption.fileName = "iFile";
            uploadOption.data = {type: "id"};
            uploadOption.headers = {token: this.user.token};
            uploadOption.checkSuccess = (res: any, file: any) => {
                return res.code === 1;
            };
            return uploadOption;
        }

        private addedFrontHandler() {
            const file = (<any> this).frontFiles[0];
            file && (<any> this).$refs.upload.removeFile(file);
        }

        private addedBackHandler() {
            const file = (<any> this).backFiles[0];
            file && (<any> this).$refs.upload.removeFile(file);
        }

        private errHandler(file: any) {
            (<any> this).$createToast({
                type: "warn",
                txt: String(file.response.message),
                time: 1000
            }).show();
        }

        private submit() {
            if (this.canUpload) {
                const frontFile: any = (<any> this).frontFiles[0];
                const backFile: any = (<any> this).backFiles[0];
                if (frontFile && backFile) {
                    if (frontFile.response.code === 1 && backFile.response.code === 1) {
                        const toast = (<any> this).$createToast({
                            mask: true,
                            time: 0,
                            txt: "提交审核中"
                        }).show();
                        Http.post(this.api.postCertification, {front_id: frontFile.response.data.id, back_id: backFile.response.data.id}, {token: this.user.token}).then((res) => {
                            if (res.code === 1) {
                                this.getAuthStatus();
                            } else {
                                this.globalSingleResultToast(res);
                            }
                        }).catch(() => {
                            toast.hide();
                        });
                    } else {
                        (<any> this).$createToast({
                            mask: true,
                            type: "error",
                            txt: "请等待身份证上传后提交或者重新上传"
                        }).show();
                    }
                } else {
                    (<any> this).$createToast({
                        mask: true,
                        type: "error",
                        txt: "请上传身份证正反面照片"
                    }).show();
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .view
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;


        .auth-wrap
            height calc(100vh - var(--safe-area-inset-top) - 45px);
            width 100vw;
            position relative;

            .auth-result
                height calc(100vh - var(--safe-area-inset-top) - 45px);
                width 100vw;
                justify-content center;
                align-items center;
                display flex;
                flex-direction column;

                .auth-result-text
                    line-height 30px;
                    color $theme-common-color;


            .auth-area
                background #fff;
                width 300px;
                height 190px;
                margin 15px auto 20px;
                border-radius 12px;
                overflow hidden;

            >>> .cube-upload
                .cube-upload-file, .cube-upload-btn
                    margin 0
                    height 190px

                .cube-upload-file
                    margin 0

                    + .cube-upload-btn
                        margin-top -190px
                        opacity 0

                .cube-upload-file-def
                    width 100%
                    height 100%

                    .cubeic-wrong
                        display none

                .cube-upload-btn
                    display flex
                    align-items center
                    justify-content center
                    color $theme-thin-color

                    > div
                        text-align center

                    i
                        display inline-flex
                        align-items center
                        justify-content center
                        width 50px
                        height 50px
                        margin-bottom 20px
                        font-size 32px
                        line-height 1
                        font-style normal
                        color #fff
                        background-color $theme-thin-color
                        border-radius 50%
</style>